<template>
  <view class="app-page-home">
    <hstab001 :propsMenuList="menuList"></hstab001>
    <view v-for="(item, index) in appPageList" :key="index">
      <list005 @click="toAppPage(item.pathUrl, 0)" :showData="item"></list005>
      <hstab002
        @activeItem="(ind) => toAppPage(item.pathUrl, ind)"
        :showData="item"
      ></hstab002>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      appPageList: [
        {
          appName: "唯品会",
          appLogo: "/static/dataImage/weipinhui/icon.webp",
          tags: ["综合商城", "在线商城", "时尚购物"],
          pathUrl: "/pages/linkPage/appPage/weipinhui/index",
          menuList: [
            {
              imageUrl: "/static/dataImage/weipinhui/logo004.jpg",
            },
            {
              imageUrl: "/static/dataImage/weipinhui/logo003.jpg",
            },
            {
              imageUrl: "/static/dataImage/weipinhui/logo002.jpg",
            },
            {
              imageUrl: "/static/dataImage/weipinhui/logo001.jpg",
            },
            {
              imageUrl: "/static/dataImage/weipinhui/logo005.jpg",
            },
          ],
        },
      ],
      menuList: [
        {
          list: [
            {
              id: 1,
              title: "天猫",
              imageUrl: "/static/applogo/logo001.webp",
            },
            {
              id: 2,
              title: "京东",
              imageUrl: "/static/applogo/logo002.webp",
            },
            {
              id: 3,
              title: "大麦",
              imageUrl: "/static/applogo/logo003.webp",
            },
            {
              id: 4,
              title: "微信",
              imageUrl: "/static/applogo/logo004.webp",
            },
            {
              id: 5,
              title: "支付宝",
              imageUrl: "/static/applogo/logo005.webp",
            },
          ],
        },
        {
          list: [
            {
              id: 6,
              title: "美团",
              imageUrl: "/static/applogo/logo006.webp",
            },
            {
              id: 7,
              title: "滴答",
              imageUrl: "/static/applogo/logo007.webp",
            },
            {
              id: 8,
              title: "多点",
              imageUrl: "/static/applogo/logo008.webp",
            },
            {
              id: 9,
              title: "瓜子",
              imageUrl: "/static/applogo/logo009.webp",
            },
            {
              id: 10,
              title: "河马",
              imageUrl: "/static/applogo/logo010.webp",
            },
            {
              id: 11,
              title: "闲鱼",
              imageUrl: "/static/applogo/logo011.webp",
            },
            {
              id: 12,
              title: "斗鱼",
              imageUrl: "/static/applogo/logo012.webp",
            },
            {
              id: 13,
              title: "鱼泡",
              imageUrl: "/static/applogo/logo013.webp",
            },
            {
              id: 14,
              title: "赶集",
              imageUrl: "/static/applogo/logo014.webp",
            },
            {
              id: 15,
              title: "7猫",
              imageUrl: "/static/applogo/logo015.webp",
            },
          ],
        },
      ],
    });
    const toAppPage = (url, index) => {
      uni.navigateTo({
        url: `${url}?pageIndex=${index}`,
      });
    };

    return {
      toAppPage,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.app-page-home {
  position: relative;
  height: 100vh;
  width: 100%;
  padding-top: 80rpx;
  box-sizing: border-box;
  background: #f8f8f8;
  /deep/ .hs-tab-002 {
    .hs-tab-item {
      width: 260rpx !important;
      margin-right: 30rpx !important;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
      .image-box {
        margin-bottom: 0rpx !important;
        margin-top: -20rpx;
        height: 550rpx !important;
      }
    }
  }
}
</style>
